import React from 'react';
import { Button } from '@teamix/ui';
import { getIntroPointState, setIntroPointState } from 'api';
import './index.scss';
import { CSSTransition } from 'react-transition-group';
import intl from '../../../../../../locale';

const prefix = 'rdc-invite-org-member';

export default class RdcInviteMember extends React.Component {
  state = {
    visible: false,
  };

  componentDidMount() {
    this.getIfRdcInviteShow();
  }

  getIfRdcInviteShow = () => {
    getIntroPointState('rdc_invite_organization_member')
      .then((result) => {
        if (result.state) {
          this.setState({
            visible: true,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  setIfDialogShow = () => {
    this.setState({
      visible: false,
    });

    setIntroPointState('rdc_invite_organization_member')
      .then(() => {})
      .catch((err) => {
        console.error(err);
      });
  };

  onKnownBtnClick = () => {
    this.setIfDialogShow();
  };

  render() {
    const { visible } = this.state;

    return (
      <CSSTransition in={visible} timeout={500} classNames="invite" unmountOnExit>
        <div>
          <div className={`${prefix}`}>
            <div className={`${prefix}-container`}>
              <img
                className={`${prefix}-container-image`}
                src="https://img.alicdn.com/tfs/TB1L1xEBYj1gK0jSZFuXXcrHpXa-360-204.png"
              />
            </div>
            <div className={`${prefix}-description`}>
              {intl.get({
                id: 'code-assets.containers.rdcInviteMember.ClickEnterpriseMembersInThe',
                defaultMessage: '点击应用中心的「企业成员」',
              })}
              <br />
              {intl.get({
                id: 'code-assets.containers.rdcInviteMember.InviteMoreMembers',
                defaultMessage: '邀请更多成员',
              })}
            </div>
            <div>
              <Button className={`${prefix}-btn-known`} onClick={this.onKnownBtnClick}>
                {intl.get({
                  id: 'code-assets.containers.rdcInviteMember.ISee',
                  defaultMessage: '我知道了',
                })}
              </Button>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }
}
